<template>
	<view>
		<!-- <u-navbar :is-back="false" title="叮咚优选" :title-bold="false" title-size="34" title-color="black"
			:background="background"></u-navbar> -->
			
		<view class="search_box">
			<u-search @click="$project.toPath('/pages/index/search')" class="search" disabled bg-color="#fff" search-icon-color="#BFBFBF" placeholder="请输入搜索产品" v-model="keyword"
				:showAction="false"></u-search>
			<button open-type="contact"> <text class="iconfont black kf">&#xe658;</text></button>
		</view>

		<view class="list_box">
			<view class="banner">
				<swiper class="swiper" indicator-dots="true" autoplay="true" duration="2000" circular="true"
					disable-touch="true">
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image class="bimg" :src="item.image"></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="cate_box">
				<view @click="navUrl(item,index)" class="cate_info" v-for="(item,index) in cate" :key="index">
					<image class="cate_img" :src="item.image"></image>
					<view>{{item.name}}</view>
				</view>
			</view>

			<view class="b_box" v-if="zt&&zt.length>0">
				<image class="b_img" @click="toZt(item)" :src="item.image" v-for="(item,index) in zt" :key="index">
				</image>
			</view>

			<!-- 限时抢购 -->
			<view class="limit_buy" v-if="activeList">
				<image :src="aimg"
					style="position: absolute;height: 80rpx;width: 100%;border-radius: 20rpx 20rpx 0 0 ;"></image>
				<view class="title " @click="limitPage">

					<view>
						<text class="fs-16 bold" style="font-size: 30rpx;margin-right: 10rpx;">{{activity.name}}</text>
					</view>

					<view class=" flex-center"><text>更多</text>
						<text class="iconfont iconfanhui t-180 gray-font"></text>
					</view>

				</view>
				<view class="body">
					<my-recomend v-for="(item, index) in activeList" :key="index" :ware="item" isActive="time"
						@nextPage='enterDetail(item)'>
					</my-recomend>
				</view>
			</view>

			<view class="recomend" v-if="recommendList.length">
				<view class="title hot_box">
					<view class="hot_name">好物推荐</view>
					<image class="hot_img" src="@/static/img/hotbuy.png" mode="widthFix"></image>
				</view>
				<view class="body">
					<my-recomend v-for="(item, index) in recommendList" :key="index" :ware="item" :config="config"
						@showCart="openCart(item)" class="myc_recomend"></my-recomend>
				</view>
			</view>

		</view>


           <view class="right_box">
			   <text class="cart-count" v-if="cartCount>0">{{cartCount}}</text>
			   <u-icon @click="$project.toPath('/pages/tabar/shopcart')" name="shopping-cart" size="44"></u-icon>
			   <view @click="$project.toPath('/pages/tabar/shopcart')">购物车</view>
			   <view class="rxian"></view>
			   <u-icon @click="$project.toPath('/pages/shopcart/cate')" name="file-text" size="44"></u-icon>
			   <view @click="$project.toPath('/pages/shopcart/cate')">分类</view>
		   </view>

           <!-- <u-popup v-model="psShow" mode="center" border-radius="14" :closeable="true" close-icon-pos="top-right">
           	<view class="b_msg_box">
           		<view class="b_msg_title">温馨提示</view>
           		<view class="b_msg_msg">{{psMsg}}</view>
           		<view class="b_msg_btn" @click="psShow=false">确定</view>
           	</view>
           </u-popup>   -->        

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to bottom, #FDD7D6, #FDE9E2)'
				},
				banner: [],
				cate: [],
				zt: [],
				recommendList: [],
				activeList: '',
				activity: '',
				aimg:'',
				start: '',
				times:'',
				psShow:false,
				psMsg:'',
				cartCount:0,
				params: {
					page: 1,
					tag: 'recommend'
				},
				total:0
			}
		},
		onLoad(e) {
			
			if(e.title){
				console.log(e);
				uni.setNavigationBarTitle({
					title:e.title
				})
			}
			
		   	this.aimg=this.$imgUrl+'/assets/img/active_index.png';
			//this.getShopTitle();
		},
		onShow() {
			this.getBanner();
			this.getCate();
			this.getZt();
			this.indexMainRecommend();
			this.zhekou();
			this.getCount();
			//this.getShopPs();
		},
		methods: {
			getCount() {
				this.$get(this.$api.cart_count, {admin_id:0}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.cartCount = data.data;
					}
				})
			},
			enterDetail(item) {
				uni.navigateTo({
					url: '/pages/index/shopdetail?id=' + item.goods.id
				})
			},
			getShopPs(){
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopPs, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})
				
					},
					fail(error) {
						_.$get(_.$api.shopPs, {
							lng: '',
							lat: ''
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})
						console.log(error);
					}
				})
			},
			getShopTitle(){
				this.$get(this.$api.shopTitle,{},res=>{
					let data=res.data;
					if(data.code==1){
						uni.setNavigationBarTitle({
							title:data.data
						})
					}
				});
			},
			limitPage() {
				uni.navigateTo({
					url: '/pages/indexNav/activeLimit?title=' + this.activity.name
				})
			},
			zhekou() {

				this.$get(this.$api.activityGoods, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						console.log(data)
						
						if(data.data){
							this.activity = data.data.activity;
							this.activeList = data.data.list.data;
							let time = (new Date() - 0) / 1000;
							let {
								starttime,
								endtime
							} = data.data.activity;
							this.start = time - starttime > 0 ? true : false;
							this.times = this.start ? endtime - time : starttime - time;
							setInterval(() => {
								this.times--
							}, 1000)
						}
					}
				})
			},
			indexMainRecommend() {
				
				this.$get(this.$api.labelGoods, this.params, res => {
					let data = res.data;
					if (data.code == 1) {
						this.total = data.data.total;
						this.recommendList = data.data.data;
					}
				});
				
				/* this.$get(this.$api.mainRecommend, {
					
				}, res => {
					let data = res.data;
					if (data.code == 1) {

						this.recommendList = data.data;
					}
				}); */
			},
			navUrl(e, index) {

				/* getApp().globalData.classId = e.id;
				getApp().globalData.isReload = true;
				uni.navigateTo({
					url: '/pages/tabar/classify'
				}) */
				
				uni.navigateTo({
					url: '/pages/shopcart/cates?cate_id='+e.id
				})

			},
			toZt(e) {
				if (e.type == 1) {
					uni.navigateTo({
						url: e.url
					})
				} else {
					uni.switchTab({
						url: e.url
					})
				}
			},
			getZt() {
				this.$get(this.$api.shopZt, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.zt = data.data;
					}
				});
			},
			getBanner() {
				this.$get(this.$api.shopBanner, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.banner = data.data;
					}
				});
			},
			getCate() {

				this.$get(this.$api.mainCate, {
					type: 1
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.cate = data.data;
					}
				});

			}
		},
		onReachBottom() {
		
			if (this.recommendList.length < this.total) {
				this.params.page++;
				this.$get(this.$api.labelGoods, this.params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.recommendList.push(ress);
					});
				});
			}
		
		},
	}
</script>

<style lang="scss" scoped>
	
	.cart-count {
		margin: -5rpx 0 0 30rpx;
		text-align: center;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 14rpx;
		font-size: bold;
		border-radius: 50%;
		background: #F01A1A;
		z-index: 11;
		color: white;
		// border: 1px solid orange;
	}
	
	.recomend .title{
		height:65rpx;
	}
	.search {
		width: 85%;
		margin-right: 5%;
	}

	.search_box {
		box-sizing: border-box;
		padding: 30rpx 30rpx 65rpx 30rpx;
		//background-color: #F7EDE1;
		
		background: linear-gradient(to bottom, #FDE1DD, #F7EDE1 40%);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kf {
		font-size: 60rpx;
		color: #BBBAB6;
	}

	.list_box {
		box-sizing: border-box;
		padding: 0 30rpx;
		position: relative;
		top: -50rpx;
	}

	.banner {
		height: 138.13px;
		border-radius: 15rpx;
	}

	.swiper {
		height: 100%;
	}

	.bimg {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.cate_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;
		margin-top: 15rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 0 0 30rpx 0;
		font-size: 28rpx;
	}

	.cate_info {
		width: 20%;
		text-align: center;
		margin-top: 30rpx;
	}

	.cate_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.b_box {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.b_img {
		width: 48%;
		height: 180rpx;
		border-radius: 15rpx;
	}

	.title {
		padding: 0rpx 30rpx 0;
		position: relative;
		text-align: center;
	}

	.hot_img {
		width: 50%;
		text-align: center;
	}

	.hot_name {
		position: absolute;
	}

	.body {
		padding: 0;
	}
	
	.limit_buy .title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.limit_buy .title view {
		display: flex;
		align-items: center;
	}
	
	.limit_buy .title view text {
		font-size: 12px;
		color: white;
		font-weight: normal;
	}
	
	.limit_buy .body {
		margin-top: 30rpx;
		display: flex;
		overflow: scroll;
	}
	
	.limit_buy .icon-jiantou {
		font-size: 20rpx;
		height: 32rpx;
		line-height: 32rpx;
	}
	
	.limit_buy {
		position: relative;
		background: white;
		width: 690rpx;
		margin: 15rpx auto 0;
		border-radius: 20rpx;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	}
	
	.limit_buy .body{
		padding-left: 15rpx;
		border-radius: 0 0 30rpx 30rpx;
	}
	
	.limit_buy .title{
		padding: 20rpx 30rpx 0;
		position: relative;
		z-index: 9;
		font-size: 36rpx;
		/* font-weight: bold; */
	}
	
	
	.limit_buy /deep/ .recomend_single {
		width: 240rpx;
		.plus {
			display: none;
		}
	}
	
	.limit_buy /deep/ .recomend_single .photo {
		width: 200rpx;
		height: 200rpx;
	}
	
	.limit_buy .title text {
		position: relative;
		z-index: 9;
		font-size: 36rpx;
		color: white;
		/* font-weight: bold; */
	}
	
	.limit_buy .title:before {
		content: ' ';
		width: 60rpx;
		height: 8rpx;
		z-index: 8;
		background: linear-gradient(to right, #FF7133, rgba(255, 179, 12, 0.3));
		position: absolute;
		bottom: 5rpx;
	}
	
	
	.right_box{
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;
		background-color: white;
		z-index: 100;
		border-radius: 45rpx;
		text-align: center;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	}
	.rxian{
		width: 95%;
		height: 1rpx;
		background-color:#F2F2F2;
		margin: 20rpx 0;
	}
	
	
	
</style>